<!-- 系统账号 -->
<template>
  <div class="container">
    <!-- 控件 -->
    <div class="controlBox">
      <!-- <el-col :span="8" style="margin-right:40px">
        <el-input placeholder="请输入内容" v-model="input" >
          <el-button slot="append" icon="el-icon-search" @click="findUserFun"></el-button>
        </el-input>
      </el-col> -->

      <el-form ref="form" :inline="true" :model="search" label-width="80px" size="mini">
        <el-form-item label="手机号">
            <el-input v-model="search.tel" placeholder="通过手机号进行搜索"></el-input>
        </el-form-item>
        <el-form-item label="用户名">
            <el-input v-model="search.name" placeholder="通过用户名进行搜索"></el-input>
        </el-form-item>
        
        <el-form-item>
            <el-button type="primary" @click="findUserFun">搜 索</el-button>
        </el-form-item>
      </el-form>

      <el-button slot="reference" type="primary" size="mini" @click="centerDialogVisibleFun">+ 添加账号</el-button>

      <el-dialog
        title=""
        :visible.sync="centerDialogVisible"
        width="40%"
        center
      >
        <el-form ref="form" :model="form"  label-position="left" label-width="80px">
        <!-- <el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="80px"> -->
          <!-- <el-form-item label="账号" prop="account">
            <el-input v-model="form.account" />
          </el-form-item> -->

          <el-form-item label="负责人" prop="name">
            <el-input v-model="form.name" />
          </el-form-item>

          <el-form-item label="联系电话" prop="phoneNum">
            <el-input v-model="form.phoneNum" />
          </el-form-item>

          <el-form-item label="账号用途" prop="purpose">
            <el-input v-model="form.purpose" />
          </el-form-item>

          <el-form-item v-if="popupTag != 'edit'" label="密码" prop="password">
            <el-input v-model="form.password" />
          </el-form-item>

          <el-form-item label="权限赋予" prop="type">
            <el-checkbox-group v-model="form.type">
              <el-checkbox v-for="item in permission" :key="item.value" :label='item.value'>{{ item.label }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>

        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm('form')">提 交</el-button>
        </span>
      </el-dialog>

    </div>
    <!-- 列表 -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      height="700px"
      :header-cell-style="{background:'#efefef'}"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="账号ID"  />
      <el-table-column prop="name" label="负责人"  />
      <el-table-column prop="createTime" label="创建日期"  />
      <el-table-column prop="tel" label="联系电话"  />
      <el-table-column prop="remark" label="账号用途"  />
      <el-table-column fixed="right" label="操作" width="220">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            icon="el-icon-edit"
            @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button>
          <el-button
            type="text"
            style="color:#f56c6c"
            size="small"
            icon="el-icon-delete"
            @click="handleDelete(scope.$index, scope.row)"
          >移除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      class="controlBox"
      style="margin-top:20px"
      background 
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20, 40]" 
      :page-size="pageSize"         
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">    
    </el-pagination>
  </div>
</template>

<script>
import { getAccountList,findUser,addAccount,amendAccount,delAccount} from '@/api/user'
export default {
  components: {},
  data() {
    return {
      centerDialogVisible: false,
      currentPage:1,  //  初始页
      pageSize:10,    //  每页的数据
      total:0,
      search: {
          name: '',
          tel: '',
      },
      input:'', //搜索框内容
      popupTag:'',  //区别点击什么打开的弹框
      form: {
        id: '',
        name: '',
        phoneNum:'',
        date1: '',
        date2: '',
        password: '',
        purpose:'',
        type: [],
        resource: '',
        desc: ''
      },
      permission:[
        // { label:'首页',value:1 },
        { label:'账号管理',value:2 },
        { label:'样式管理',value:3 },
        { label:'动态监控',value:4 },
        { label:'系统管理',value:5 },
        { label:'人员管理',value:6 },
        { label:'区域管理',value:7 },
        { label:'服务内容管理',value:8 },
        { label:'运行日志',value:9 }
      ],
      rules: {
        account: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { required: true, pattern: '^[0-9]{2}$', message: '请输入正确的账号，账号位2位数字', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入负责人姓名', trigger: 'blur' }
        ],
        phoneNum: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { required: true, pattern: '^1[3456789]\\d{9}$', message: '请输入正确的联系电话', trigger: 'blur' }
        ],
        purpose: [
          { required: true, message: '请输入账号用途', trigger: 'blur' }
        ],
        date1: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        date2: [
          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        ],
        password: [
          { required: true, message: '请输密码', trigger: 'blur' },
          { required: true, pattern: '^[A-Za-z0-9]{6,8}$', message: '密码为6~8位数字和字母', trigger: 'blur' }
        ],
        type: [
          { type: 'array', required: true, message: '请至少给予一种权限', trigger: 'change' }
        ]
      },
      tableData: []
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getAccountListFun()
  },
  mounted() {},
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if(this.popupTag == 'add'){
            this.addAccountFun()
          }else if(this.popupTag == 'edit'){
             this.amendAccountFun()
          }
          
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    //添加账号弹框
    centerDialogVisibleFun(){
      this.form.id = '';
      this.form.name = '';
      this.form.phoneNum = '';
      this.form.purpose = '';
      this.form.type = [];

      this.centerDialogVisible = true;
      this.form.type = []
      this.popupTag = 'add'
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    //编辑
    handleEdit(index, row) {
      this.popupTag = 'edit'
      
      this.centerDialogVisible = true;

      this.form.id = row.id;
      this.form.name = row.name;
      this.form.phoneNum = row.tel;
      this.form.purpose = row.remark
      // this.form.type = row.menuAuth.split(',')
    },
    handleDelete(index, row) {
      this.delAccountFun(row.id)
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
        this.pagesize = size;
        console.log(this.pagesize)  //每页下拉显示数据
    },
    handleCurrentChange: function(currentPage){
        this.currentPage = currentPage;
        console.log(this.currentPage)  //点击第几页
    },
    //获取列表
    getAccountListFun(){
      getAccountList(
        this.currentPage,
        this.pageSize,
        this.search.tel,
        this.search.name
      ).then((res)=>{
        this.tableData = res.data.users
        this.total = res.data.total
      })
    },
    //查找
    findUserFun(  ){
      this.getAccountListFun()
    },
    //添加
    addAccountFun(){
      addAccount( 
        this.form.name,
        this.form.phoneNum,
        this.form.password,
        0,
        this.form.purpose,
        this.form.type.join(',')
      ).then((res)=>{
        console.log(res);
        if(res.code == 2000){
          this.$message({
            message: '添加成功',
            type: 'success'
          });
          this.centerDialogVisible = false;
          this.getAccountListFun()

          this.form.id = '';
          this.form.name = '';
          this.form.phoneNum = '';
          this.form.purpose = '';
          this.form.type = [];
        }
      })
    },
    //修改
    amendAccountFun(){
      console.log(this.form.id,
        this.form.name,
        this.form.phoneNum,
        0,
        this.form.purpose,
        this.form.type.join(','))
      amendAccount(
        this.form.id,
        this.form.name,
        this.form.phoneNum,
        0,
        this.form.purpose,
        this.form.type.join(',')
      ).then((res)=>{
        if(res.code == 2000){
          this.$message({
            message: '修改成功',
            type: 'success'
          });
          this.centerDialogVisible = false;
          this.getAccountListFun()

          this.form.id = '';
          this.form.name = '';
          this.form.phoneNum = '';
          this.form.purpose = '';
          this.form.type = [];
        }
      })
    },
    //删除
    delAccountFun(id){
      delAccount(
        id
      ).then((res)=>{
        if(res.code == 2000){
          this.getAccountListFun()
          this.$message({
            message: '删除成功',
            type: 'success'
          });
        }
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.container {
  padding: 20px;
  .controlBox{
     padding-bottom: 20px;
  }
}
</style>
